<template>
	<div ref="tableRef">
		<el-table
			:data="tableData"
			style="width: 100%"
			:height="resetSize(720)"
			class="c-table"
			header-row-class-name="t-head"
			header-cell-class-name="t-head-cell"
			cell-class-name="t-body-cell"
			row-class-name="t-body-row"
			align="center"
		>
			<el-table-column prop="lineNumber" label="公交线路号" />
			<el-table-column prop="runningInterval" label="运行区间" />
			<el-table-column prop="stationName" label="车站名" />
			<el-table-column prop="date" label="日期" />
      <el-table-column prop="arrivalTime" label="到站时间" />
      <el-table-column prop="departureTime" label="发车时间" />
      <el-table-column prop="stopStation" label="停靠站点" />
      <el-table-column prop="loadRate" label="满载率" />
		</el-table>
		<div class="pagination table-wrap">
			<el-pagination
				class="c-pagination"
				:teleported="false"
				popper-class="c-popper"
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="[10, 20, 50, 100]"
				:size="'small'"
				layout="total,  prev, pager, next, sizes"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
			<div class="info">
				<img src="@img/global/bus.png" alt="" class="icon" />
				<div class="right">
					<div class="top-rect">
						<img src="@img/global/blue-rect.png" alt="" class="blue-rect" />
						<img src="@img/global/origin-rect.png" alt="" class="origin-rect" />
					</div>
					<div class="title">
						<div class="item">
							<div class="name">计划班次</div>
							<div class="number">{{ planCount }}</div>
							<div class="unit">次</div>
						</div>
						<div class="item">
							<div class="name">实际班次</div>
							<div class="number">{{ sjCount }}</div>
							<div class="unit">次</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { ref, computed, onMounted, watch } from 'vue'
	import { resetSize } from '@/utils/reset'
	import { getCityBusStation } from '@/global'
	import { getBusList } from '@/api/train'

	import { useScroll } from '@/hooks/useScroll'
	const busName: any = defineModel('busName');
	const currentPage = ref(1)
	const pageSize = ref(10)
	// const cityBusStationList = getCityBusStation(100)
	const cityBusStationList = ref<any>([])
	const tableData = ref<any>([])
	const tableRef = ref()
	const scrollInfo = ref<any>({})
	const searchList = ref<any>([])

	const planCount = ref(0)
	const total = ref(0)
	const sjCount = ref(0)
	onMounted(() => {
		
		getBustListFuc('');
		
		scrollInfo.value = useScroll(tableRef.value, currentPage.value, cityBusStationList, pageSize.value);

	})

	const getBustListFuc = (name: string) => {
		let params = {
			pageSize: pageSize.value,
			pageNum: currentPage.value,
			name: name ? name : ''
		}
		getBusList(params).then((res: any) => {
			console.log("getBusList========", res.data.records)
			planCount.value = res.data.size
			sjCount.value = res.data.total
			tableData.value = res.data.records
			total.value = res.data.total
		})
	}

	const handleSizeChange = async (pageNum: any) => {
		// currentPage.value = pageNum;
		await getBustListFuc(busName.value)
	}
	const handleCurrentChange = async () => {
		await getBustListFuc(busName.value)

	}
	const getData = (list: any) => {
		if (scrollInfo.value.setScroll) {
			scrollInfo.value.scrollTop = 0
			scrollInfo.value.setScroll()
		}

		let start = pageSize.value * (currentPage.value - 1)
		let end = currentPage.value * pageSize.value
		tableData.value = list.slice(start, end)
	}
	const search = () => {
		// searchList.value = cityBusStationList.value.filter((item: any) => {
		// 	return item.name.includes(busName.value)
		// })
		// getData(searchList.value)
		getBustListFuc(busName.value);
	}
	const reset = () => {
		busName.value = ''
		getBustListFuc('');
	}
	// watch(
	// 	cityBusStationList,
	// 	(cityBusStationList) => {
	// 		if (cityBusStationList) {
	// 			getData(cityBusStationList)
	// 		}
	// 	},
	// 	{ deep: true, immediate: true },
	// )
	defineExpose({ search, reset })
</script>

<style lang="scss" scoped>
	// .table-wrap :deep(.el-pagination .btn-prev){
	// 	height: 40px;
	// }
	// .table-wrap :deep(.el-pagination .btn-next){
	// 	height: 40px;
	// }
	// .table-wrap :deep(.el-pagination .el-pager .number){
	// 	font-size: 25px;
	// 	height: 40px;
	// }
	.table-wrap :deep(.el-pagination__total){
		// font-size: 30px;
	}
	.table-wrap :deep(.el-pagination__sizes .el-select .el-select__selected-item span) {
		// font-size: 25px;  /* 输入框文字大小 */
		color: #fff;
	}

	/* 修改分页选择器的下拉菜单文字 */
	.table-wrap :deep(.el-pagination__sizes .el-select .el-popper .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-select-dropdown__item span) {
		// font-size: 25px;  /* 下拉选项文字大小 */
		color: #fff;
	}

	/* 修改分页选择器下拉菜单整体 */
	.el-pagination--small button, .el-pagination--small span {
		// font-size: 25px;  /* 下拉菜单统一字体 */
	}
	.pagination {
		position: relative;
	}
	.info {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		img.icon {
			width: 81px;
			height: 81px;
			margin-right: 25px;
		}
		.blue-rect,
		.origin-rect {
			height: 12px;
		}
		.blue-rect {
			width: 173px;
		}
		.origin-rect {
			width: 281px;
			margin-left: -10px;
		}
		.title {
			display: flex;
			font-size: 28px;
			.item {
				display: flex;
				align-items: end;
				.number {
					font-size: 36px;
					color: #0080ff;
					margin: 0 5px;
				}
				&:nth-child(2) {
					margin-left: 40px;
					.number {
						color: #ff9d00;
					}
				}
			}
		}
	}
</style>
